import React, { Component, PropTypes } from 'react';
import At from './ActionTypes'

export default class Footer extends Component {
    renderFilter(filter, name) {
        if (filter === this.props.filter) {
            return name;
        }

        return (
            <a href="#" onClick={e => {
              e.preventDefault();
              this.props.onFilterChange(filter);
            }}>
                {name}
            </a>
        );
    }

    render() {
        return (
            <p>
                Show:
                {' '}
                {this.renderFilter(At.SHOW_ALL, 'All')}
                {', '}
                {this.renderFilter(At.SHOW_COMPLETED, 'Completed')}
                {', '}
                {this.renderFilter(At.SHOW_ACTIVE, 'Active')}
                .
            </p>
        );
    }
}

Footer.propTypes = {
    onFilterChange: PropTypes.func.isRequired,
    filter: PropTypes.oneOf([
        At.SHOW_ALL,
        At.SHOW_COMPLETED,
        At.SHOW_ACTIVE
    ]).isRequired
}